<template>
  <div class="advert" v-if="showAd&&advertList.length>0">
    <div class="head-close">
      <span>广告</span>
      <div @click="closeAd">
        <img src="../../assets/image/close.png" alt="">
      </div>
    </div>
    <div class="content">
      <div class="advert-list">
        <a class="advert-item" :href="item.src" target="_blank" tag="div" v-for="(item,index) in advertList"
           :key="index" :class="{'advert-item-3':item.imgList.length==3,'advert-item-1':item.imgList.length==1}">
          <div v-if="item.imgList.length==3">

            <span>{{item.title}}</span>
            <div>
              <img v-for="(img,key) in item.imgList" :key="key" :src="img" alt="">
            </div>
          </div>
          <div v-if="item.imgList.length==1">
            <img v-for="(img,key) in item.imgList" :key="key" :src="img" alt="">
            <span>{{item.title}}</span>
          </div>
        </a>

      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "Advert",
    props: {
      advertList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        showAd: true
      }
    },
    methods: {
      closeAd() {
        this.showAd = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .advert {

    padding: .14rem;
    .head-close {
      display: flex;
      flex-direction: row;
      align-items: center;
      align-content: center;
      position: relative;
      height: .3rem;
      line-height: .3rem;
      width: 100%;
      span {
        color: #999;
      }
      div {
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: center;
        position: absolute;
        line-height: .3rem;
        right: 0;
        height: 100%;
        width: .15rem;
        img {
          display: block;
          line-height: .3rem;
          width: .15rem;
          height: .15rem;
        }
      }

    }
    .content {
      .advert-list {
        .advert-item {
          display: block;
          overflow: hidden;
          margin-bottom: .1rem;
        }
        .advert-item-3 {
          div{
            width: 100%;
            span {
              color: #666 !important;
              display: block;
              padding: .05rem 0;
              font-size: .18rem;
              font-weight: 600;
            }
            div {
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              justify-content: space-between;
              img {
                flex: 0 1 33%;
                max-width: 33%;
                width: 100%;
                height: 100%;
              }
            }
          }

        }
        .advert-item-1 {
          position: relative;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          div{
            width: 100%;
            img {
              flex: 0 1 100%;
              max-width: 100%;
              width: 100%;
              height: 100%;
              max-height: 1.5rem;
            }
            span {
              position: absolute;
              bottom: .01rem;
              left: 0;
              display: block;
              background: rgba(0, 0, 0, .5);
              color: white;
              width: 100%;
              padding: .05rem;
              font-size: .16rem;
              font-weight: 400;

            }
          }

        }
      }
    }
  }
</style>
